<template>
  <div class="boss">
    <div class="title">核酸报告查询</div>
    <van-form @submit="onSubmit">
      <div>
        <van-field
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
          label-width="5.5em"
        />
      </div>

      <van-field
        v-model="idcard"
        name="身份证号"
        label="身份证号"
        label-width="5.5em"
        placeholder="身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
      />
      <van-field
        readonly
        clickable
        name="stadatetimePicker1"
        v-model="staValue"
        label="开始时间"
        label-width="5.5em"
        placeholder="点击选择时间"
        :rules="[{ required: true, message: '请填写开始日期' }]"
        @click="showStaPicker = true"
      />
      <van-popup v-model="showStaPicker" position="bottom">
        <van-datetime-picker
          v-model="currentStaDate"
          @confirm="onConfirmSta"
          @cancel="showStaPicker = false"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :formatter="formatter"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="enddatetimePicker"
        v-model="endValue"
        label="结束时间"
        label-width="5.5em"
        placeholder="点击选择时间"
        :rules="[{ required: true, message: '请填写结束日期' }]"
        @click="showEndPicker = true"
      />
      <van-popup v-model="showEndPicker" position="bottom">
        <van-datetime-picker
          v-model="currentEndDate"
          @confirm="onConfirmEnd"
          @cancel="showEndPicker = false"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :formatter="formatter"
        />
      </van-popup>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <p>*温馨提示：</p>
    <span>采样时间为12:00之前，结果请于15:30以后查询;</span>
    <span>采样时间为17:30之前，结果请于21:30以后查询;</span>
    <span>具体时间查询时间以采样点公告为主</span>
  </div>
</template>

<script>
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);
export default {
  data() {
    return {
      username: "",
      idcard: "",
      staValue: "",
      endValue: "",
      showStaPicker: false,
      showEndPicker: false,
      minDate: new Date(2022, 4, 1),
      currentStaDate: new Date(),
      currentEndDate: new Date(),
    };
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    onConfirmSta(val) {
      this.staValue = dayjs(val).utc(true).format("YYYY-MM-DD");
      this.showStaPicker = false;
    },
    onConfirmEnd(val) {
      this.endValue = dayjs(val).utc(true).format("YYYY-MM-DD");
      this.showEndPicker = false;
    },
    onSubmit(values) {
      let query = {
        name: this.username,
        sfzh: this.idcard,
        startdt: this.staValue,
        enddt: this.endValue,
      };

      this.$router.push({
        path: "/wechat/nucleic-acid-report-query/report-list",
        query,
      });
    },
  },
};
</script>

<style scoped>
.boss {
  padding: 20px 15px;
}

.title {
  text-align: center;
  margin: 0 0 10px 0;
}
</style>
